<template>
    <div>
        <!-- 搜索栏 -->
        <search></search>
        <!-- 搜索栏 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="true"
            :data="goodsList"
            @pullup="loadMore"
        >
            <!-- 共用轮播图组件 -->
            <common-swiper
                :swiperList="swiperList"
                :swiperHeight="swiperHeight"
                :autoplay="5000"
            >
            </common-swiper>
            <!-- 共用轮播图组件 -->
            <!-- 商城标语 -->
            <img
                class="shop-label"
                src="../../assets/images/home/shop-label.png"
            />
            <!-- 商城标语 -->
            <!-- 图标导航栏 -->
            <icons-nav :userInfo="userInfo"></icons-nav>
            <!-- 图标导航栏 -->
            <!-- 活动入口组件 -->
            <!-- <activity :isVip="userInfo.is_vip"></activity> -->
            <!-- 活动入口组件 -->
            <!-- 拼团活动入口 -->
            <!-- <group-buy></group-buy> -->
            <!-- 拼团活动入口 -->
            <!-- 消息轮播组件 -->
            <message-swiper></message-swiper>
            <!-- 消息轮播组件 -->
            <!-- 广告轮播组件 -->
            <!-- <adv-swiper></adv-swiper> -->
            <!-- 广告轮播组件 -->
            <!-- 共用商品列表组件 -->
            <div class="goods-list-top"><img src="@/assets/images/home/home-list-title.png" /></div>
            <common-good-list
                :goodsList="goodsList"
                :goodsType="0"
            >
            </common-good-list>
            <!-- 共用商品列表组件 -->
        </common-scroll>
        <!-- 共用页面滚动组件 -->
        <!-- 共用底部导航栏 -->
        <common-footer nowPage="0"></common-footer>
        <!-- 共用底部导航栏 -->

        <!-- 关注公众号浮窗 -->
        <div
            class="attention-btn"
            @click="attentionShow=true"
        >关注<br>公众号</div>
        <!-- 关注公众号浮窗 -->

        <!-- 关注公众号弹窗 -->
        <attention
            :attentionShow="attentionShow"
            @closeAttention="attentionShow=false"
        ></attention>
        <!-- 关注公众号弹窗 -->

        <!-- 首页用户弹窗组件 -->
        <free-methods></free-methods>
        <!-- 首页用户弹窗组件 -->
    </div>
</template>

<script>
import CommonSwiper from '@/components/Swiper'
import CommonHeader from '@/components/Header'
import CommonFooter from '@/components/Footer'
import CommonScroll from '@/components/Scroll'
import CommonGoodList from '@/components/GoodList'
import Search from './components/Search'
import IconsNav from './components/IconsNav'
import Activity from './components/Activity3'
import GroupBuy from './components/GroupBuy'
import AdvSwiper from './components/AdvSwiper'
import MessageSwiper from './components/MessageSwiper'
import FreeMethods from './components/FreeMethods'
import Attention from './components/Attention'
export default {
    name: 'Home',
    components: {
        CommonSwiper,
        CommonHeader,
        CommonFooter,
        CommonScroll,
        CommonGoodList,
        Search,
        IconsNav,
        Activity,
        GroupBuy,
        AdvSwiper,
        MessageSwiper,
        FreeMethods,
        Attention
    },
    data() {
        return {
            swiperList: [],
            swiperHeight: '57.27%',
            scrollStyle: {
                top: '1.4rem',
                left: '0',
                right: '0',
                bottom: '1.17rem'
            },
            attentionShow: false,
            goodsList: [],
            nowPage: 1,
            totalPage: 1,
            isLoading: false,
            userInfo: '',
            time: null,
            isOverTime: false
        }
    },
    mounted() {
        this.getUserInfo()
        this.getAdvList()
        this.getGoodsList()
    },
    methods: {
        getUserInfo() {
            this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        },
        getAdvList() {
            let postData = this.qs.stringify({
                act: 'index1'
            })
            this.axios.post('/api/banner.json', postData).then(res => {
                const data = res.data
                if (data.status == 1) {
                    this.swiperList = data.data
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        getGoodsList() {
            this.isLoading = true
            let postData = this.qs.stringify({
                shelf_id: 37,
                all: 0,
                page_size: 10,
                page: this.nowPage
            })
            this.axios
                .post('/api/shelf/shelf_goods.json', postData)
                .then(res => {
                    const data = res.data
                    if (data.status == 1) {
                        this.goodsList = this.goodsList.concat(data.data.list)
                        this.totalPage = Math.ceil(
                            data.data.page_info.total / 10
                        )
                        this.nowPage++
                        this.isLoading = false
                    } else {
                        this.commonDialog.alert('提示', data.msg)
                    }
                })
        },
        loadMore() {
            if (this.totalPage >= this.nowPage && this.isLoading == false) {
                this.getGoodsList()
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
.shop-label
    width 100%
.goods-list-top
    padding .58rem 0
    text-align center
    img
        height .74rem 
.attention-btn
    position fixed
    bottom 3rem
    right 0.26rem
    width 1.3rem
    height 1.3rem
    line-height 1.3
    text-align center
    border-radius 100%
    display flex
    align-items center
    justify-content center
    background-color rgba(0, 0, 0, 0.7)
    font-size 0.26rem
    font-weight 800
    letter-spacing 0.1em
    color #c3c3c3
    z-index 3
</style>


